<template>
	<view class="chat-box" id="body">
		<!-- AI模型信息栏 -->
		<view v-if="isConsultationMode" class="ai-model-info">
			<view class="ai-avatar">
				<image :src="(currentConsultation && currentConsultation.avatar) || '../../static/img/ai_avatar.png'"></image>
			</view>
			<view class="ai-info">
				<view class="ai-name">智能咨询助手</view>
				<view class="ai-status">由default模型提供支持</view>
			</view>
		</view>
		
		<scroll-view scroll-y class="chat-content" :style="{height:contentHeight + 'px'}"
			:scroll-top="$store.state.scrollTop">
			<view v-for="(item, index) in getConversitionList" :key="index">
				<!-- 用户消息 -->
				<view v-if="item.SendId == sender.Id">
					<view class="myself_item">
						<view v-if="item.State == 0">
							<image v-if="item.Type == 1" class="loadingIcon myselfImageLoad"
								src="../../static/img/loading.gif" mode="widthFix"></image>
							<image v-else class="loadingIcon myselfLoad" src="../../static/img/loading.gif"
								mode="widthFix">
							</image>
						</view>
						<view v-else-if="item.State == -1">
							<text v-if="item.Type == 1" class="sendImageError">!</text>
							<text v-else class="sendError">!</text>
						</view>
						<view v-if="item.Type == 0" class="myselfContent" v-html="item.Content">
						</view>
						<image v-else-if="item.Type == 1" class="mineSendImage" @tap="previewImg"
							:data-imgurl="item.Content" preview="1" :src="item.Content" mode="widthFix" />
						<video v-else-if="item.Type == 2" id="myvideo-mine" class="mineSendVideo" :src="item.Content"
							@fullscreenchange="screenChange" controls="false" />
						<view v-else-if="item.Type == 3" class="mineSound" @click="playSound(item)">
							<Loading v-if="item.SoundStatus == 1" class="sound-icon"></Loading>
							<li v-else class="iconfont icon-yingpin sound-icon"></li>
							<view class="desc">{{item.Description}}<text>"</text></view>
						</view>
						<view v-if="item.Type == 2" class="videoBtn" @click="videoshow(item.Content)"></view>

						<view class="myselfImage">
							<image :src="item.Avatar"></image>
						</view>
					</view>
					<view style="clear: both"></view>
				</view>
				<!-- AI消息 -->
				<view v-else-if="item.SendId == 0 || getRevicerStatus(item.SendId)">
					<view class="customerServiceBlock">
						<view class="customerServiceImage">
							<image :src="item.Avatar" />
						</view>
						<view v-if="item.Type == 0" class="otherContent" v-html="item.Content"></view>
						<image v-else-if="item.Type == 1" class="yourSendImage" :src="item.Content"
							@tap="previewImg" :data-imgurl="item.Content" preview="1" mode="widthFix" />
						<video v-else-if="item.Type == 2" id="myvideo-your" class="yourSendVideo" :src="item.Content"
							@fullscreenchange="screenChange" controls="false" />
						<view v-else-if="item.Type == 3" class="yourSound" @click="playSound(item)">
							<Loading v-if="item.SoundStatus == 1" class="sound-icon"></Loading>
							<li v-else class="iconfont icon-yingpin sound-icon"></li>
							<view class="desc">{{item.Description}}<text>"</text></view>
						</view>
						<view v-if="item.Type == 2" class="yourVideoBtn" @click="videoshow(item.Content)"></view>
					</view>
					<view style="clear: both"></view>
				</view>
			</view>
		</scroll-view>
		<view class="chat-botton" :style="{height:bottomHeight + 'px'}">
			<!-- 输入框 -->
			<view class="input-box" :class="popupLayerClass">
				<view class="textbox">
					<view class="text-mode">
						<view class="box">
							<textarea id="ta" auto-height="true" v-model="sendContent" @focus="textareaFocus()"
								@keydown="savePos()" @keyup="savePos()" @onmousedown="savePos()"
								@onmouseup="savePos()" />
						</view>
						<view class="em" @tap="chooseEmoji">
							<view class="icon biaoqing"></view>
						</view>
					</view>
				</view>
				<view class="more" @tap="showMore">
					<view class="icon add"></view>
				</view>
				<view class="send" @click="sendVerify">
					<view class="btn">发送</view>
				</view>
			</view>

			<!-- 底部弹框 -->
			<view class="popup-layer" :class="popupLayerClass">
				<!-- 表情包 -->
				<view class="face" :class="{hidden:hideEmoji}">
					<ul>
						<li v-for="(item, index) in expressions" :key="index">
							<image :src="item.icon" :title="item.title"
								@click.stop="insertEmo(item.title)" mode="widthFix" />
						</li>
					</ul>
				</view>
				<!-- 工具 -->
				<ul class="toolUl" :class="{hidden:hideMore}">
					<li v-for="(item, index) in toolBox" :key="index">
						<view class="item" v-on:click.stop="index == 1 ? (showServiceTool = true) : ''">
							<view class="toolIcon">
								<li :class="['iconfont',item.icon]" />
								<input v-if="index == 0" class="FileImage" type="file" value=""
									v-on:click="uploadImage" />
								<input v-if="index == 1" class="FileImage" type="file" value=""
									v-on:click="selectVedio" />
								<view v-if="index == 2" class="FileImage" @click="openSoundRecord" />
							</view>
						</view>
						<text class="totalName">{{ item.name }}</text>
					</li>
				</ul>
			</view>
		</view>
		<view v-if="soundRecord" class="cover">
			<view class="sound-box a-c d-c">
				<view class="close-btn" @click="closeSound">
					X
				</view>
				<li v-if="soundStep == 0" class="iconfont icon-luyin2" @click="startRecord"></li>
				<li v-else-if="soundStep == 1" class="iconfont icon-zanting" @click="endRecord"></li>
				<li v-else-if="soundStep == 2 && !isPlaySound" class="iconfont icon-bofang" @click="playVoice"></li>
				<image v-else-if="soundStep == 2 && isPlaySound" class="icon-bofang2"
					src="../../static/img/sounding.gif" />
					<view class="d-c tip-box">
						<view v-if="soundStep == 0" class="tip" @click="startRecord">
							开始
						</view>
						<view v-else-if="soundStep == 1" class="tip" @click="endRecord">
							暂停
						</view>
						<template v-else-if="soundStep == 2">
							<view v-show="!isPlaySound" class="tip" @click="playVoice">
								播放
							</view>
							<view class="tip" @click="sendSound">
								发送
							</view>
						</template>

					</view>
			</view>
		</view>
		<w-compress ref='wCompress' />
	</view>
</template>

<script>
	import expressions from "@/static/json/expressions.json"
	import WCompress from '@/components/common/w-compress.vue'
	import Loading from "@/components/common/loading13.vue";

	export default {
		components: {
			WCompress,
			Loading
		},
		data() {
			return {
				expressions: expressions,
				popupLayerClass: "",
				toolBox: this.$Config.SERVICETOOLBOX,
				hideMore: true,
				hideEmoji: true,
				windowHeight: 0,
				contentHeight: 0,
				bottomHeight: 50,
				scrollTop: 9999,
				sender: this.$store.state.sender,
				reciver: this.$store.state.reciver,
				currentConsultation: this.$store.state.currentConsultation,
				sendContent: "",
				start: 0,
				end: 0,
				imageList: [],
				videoUrl: "",
				soundRecord: false,
				recorderManager: {},
				innerAudioContext: null,
				voicePath: '',
				soundStep: 0,
				isPlaySound: false,
				soundDuration: 0,
					soundObj: {
					Id: null
					},
					refreshTimer: null,
					lastMessageKey: '',
                didInitialScroll: false,
                socketHandlersBound: false
			}
		},
		watch: {
			popupLayerClass(newV) {
				if (newV == 'showLayer') {
					this.bottomHeight = 240;
				} else {
					this.bottomHeight = 50;
				}
				this.contentHeight = this.windowHeight - this.bottomHeight;
			},
		},
		mounted() {
			if (this.isConsultationMode) {
				uni.setNavigationBarTitle({ title: '智能咨询' });
				// 会话页挂载即拉取消息并标记已读
				this.refreshConsultationMessages();
				this.markReadIfNeeded();
			} else {
				uni.setNavigationBarTitle({
					title: this.reciver.Name
				})
			}
			this.getTelephoneInfo();
			this.videoContext = uni.createVideoContext("myvideo", this);
			
			// 确保socket已初始化
			this.initSocketIfNeeded();
		},
            onShow() {
			// 重新初始化数据
			this.sender = this.$store.state.sender;
			this.reciver = this.$store.state.reciver;
			this.currentConsultation = this.$store.state.currentConsultation;
				// 咨询模式：进入时刷新一次并标记已读，随后开启定时刷新
				if (this.isConsultationMode) {
                    const hasSocket = this.ensureSocket();
                    if (hasSocket) {
                        this.registerSocketHandlers();
                        this.subscribeConsultation();
                        this.markReadIfNeeded();
                        if (this.refreshTimer) { clearInterval(this.refreshTimer); this.refreshTimer = null; }
                    } else {
                        this.refreshConsultationMessages();
                        this.markReadIfNeeded();
                        if (this.refreshTimer) clearInterval(this.refreshTimer);
                        this.refreshTimer = setInterval(this.refreshConsultationMessages, 2000);
                    }
				}
		},
		computed: {
			isConsultationMode() {
				return this.currentConsultation && this.currentConsultation.id;
			},
			getConversitionList() {
				if (this.isConsultationMode) {
					// 智能咨询模式：使用咨询消息列表
					return this.$store.state.consultationMessages;
				} else {
					// 好友聊天模式：使用原有逻辑
					let reciverId = (this.reciver && this.reciver.FormId) || this.reciver.Id;
				let result = this.$store.state.conversitionList.filter(
					(x) =>
					(x.SendId == this.sender.Id &&
						x.ReciverId == reciverId) ||
					(x.ReciverId == this.sender.Id &&
						x.SendId == reciverId)
				);
				return result;
				}
			}
		},
		onUnload() {
			if (this.refreshTimer) {
				clearInterval(this.refreshTimer);
				this.refreshTimer = null;
			}
			this.unregisterSocketHandlers && this.unregisterSocketHandlers();
		},
		methods: {
			// 刷新当前咨询消息（HTTP），仅在有新增消息时置底，避免反复抖动
			async refreshConsultationMessages() {
				if (!this.isConsultationMode) return;
				try {
					await this.$store.dispatch('fetchConsultationMessagesAction', this.currentConsultation.id);
					// 仅当检测到新消息才自动滚动到底部
					const list = this.$store.state.consultationMessages || [];
					const last = list.length > 0 ? list[list.length - 1] : null;
					const key = last ? `${last.Id || last.id || ''}:${list.length}` : `${list.length}`;
					if (key !== this.lastMessageKey) {
						this.lastMessageKey = key;
						this.$nextTick(() => this.$Common.toBottom(50));
					}
				} catch (e) {
					// 忽略错误，保持本地显示
				}
			},
			// 标记已读
			async markReadIfNeeded() {
				if (!this.isConsultationMode) return;
				try {
					await this.$store.dispatch('markConsultationReadAction', this.currentConsultation.id);
				} catch (e) {}
			},
            // 初始化与注册 WebSocket（若可用则使用WS替代HTTP轮询）
            initSocketIfNeeded() { return this.$store.state.socket; },
            ensureSocket() {
                if (this.$store.state.socket) return true;
                try {
                    const io = require('@hyoga/uni-socket.io');
                    const socket = io(this.$Config.SOCKETAPI, {
                        query: {},
                        transports: ['websocket', 'polling'],
                        timeout: 5000,
                    });
                    this.$store.commit('setPropName', { propName: 'socket', value: socket });
                    socket.on('connect', () => {
                        if (this.sender) {
                            socket.emit('joinChat', {
                                SendId: this.sender.Id,
                                SendName: this.sender.Name,
                                ReviceId: -1,
                                ReviceName: '',
                                NoCode: this.$store.state.noCode,
                            });
                        }
                    });
                    return true;
                } catch (e) { return false; }
            },
            registerSocketHandlers() {
                if (!this.$store.state.socket || this.socketHandlersBound) return;
                const socket = this.$store.state.socket;
                socket.on('consultationMessages', this.onConsultationMessages);
                socket.on('reviceMsg', this.onReviceMsg);
                socket.on('aiResponse', this.onAiResponse);
                this.socketHandlersBound = true;
            },
            unregisterSocketHandlers() {
                if (!this.$store.state.socket || !this.socketHandlersBound) return;
                const socket = this.$store.state.socket;
                socket.off && socket.off('consultationMessages', this.onConsultationMessages);
                socket.off && socket.off('reviceMsg', this.onReviceMsg);
                socket.off && socket.off('aiResponse', this.onAiResponse);
                this.socketHandlersBound = false;
            },
            subscribeConsultation() {
                if (!this.$store.state.socket || !this.isConsultationMode) return;
                this.$store.state.socket.emit('getConsultationMessages', {
                    consultationId: this.currentConsultation.id,
                    userId: this.sender && this.sender.Id,
                });
            },
            onConsultationMessages(response) {
                if (!Array.isArray(response)) return;
                if (!this.isConsultationMode) return;
                this.$store.commit('fetchConsultationMessages', {
                    consultationId: this.currentConsultation.id,
                    messages: response,
                });
                this.$nextTick(() => this.$Common.toBottom(50));
            },
            onReviceMsg(data) {
                if (!data || !this.isConsultationMode) return;
                const rawMsg = data.Conversition || data;
                const isConsultation = data.isConsultation || !!(rawMsg && (rawMsg.consultationId || rawMsg.ConsultationId));
                if (!isConsultation) return;
                const msgConsultationId = Number(rawMsg.consultationId || rawMsg.ConsultationId);
                if (msgConsultationId !== Number(this.currentConsultation.id)) return;
                const message = { ...rawMsg, consultationId: msgConsultationId };
                this.$store.commit('addConsultationMessage', message);
                this.$store.commit('updateConsultationLastMessage', {
                    consultationId: this.currentConsultation.id,
                    message: (message.Content || '').replace(/<[^>]*>/g, ''),
                });
                this.$nextTick(() => this.$Common.toBottom(50));
            },
            onAiResponse(response) {
                if (!response || !this.isConsultationMode) return;
                const respConsultationId = Number(response.consultationId || response.ConsultationId);
                if (respConsultationId !== Number(this.currentConsultation.id)) return;
                const aiMessage = {
                    id: (Date.now() + 1).toString(),
                    SendId: 0,
                    ReciverId: this.sender && this.sender.Id,
                    Content: response.Content,
                    Type: 0,
                    State: 1,
                    NoCode: (Date.now() + 2) + '',
                    CreateDateUtc: new Date().toISOString(),
                    Avatar: '../../static/img/ai_avatar.png',
                    ReadFlag: false,
                    SoundStatus: 0,
                    consultationId: respConsultationId,
                };
                this.$store.commit('addConsultationMessage', aiMessage);
                this.$store.commit('updateConsultationLastMessage', {
                    consultationId: respConsultationId,
                    message: (response.Content || '').replace(/<[^>]*>/g, ''),
                });
                this.$nextTick(() => this.$Common.toBottom(50));
            },
			
			// 处理咨询消息
			handleConsultationMessage(data) {
				if (!data || !data.Conversition) return;
				
				const message = data.Conversition;
				
				// 添加消息到咨询消息列表
				this.$store.commit('addConsultationMessage', message);
				
				// 如果有咨询ID，更新咨询会话的最后消息
				if (message.consultationId) {
					this.$store.commit('updateConsultationLastMessage', {
						consultationId: message.consultationId,
						message: message.Content.replace(/<[^>]*>/g, '') // 移除HTML标签
					});
				}
			},
			getRevicerStatus(SendId) {
				if (this.isConsultationMode) {
					// 智能咨询模式：AI消息的SendId为0
					return SendId === 0;
				} else {
					// 好友聊天模式：使用原有逻辑
					let reciverId = (this.reciver && this.reciver.FormId) || this.reciver.Id;
			  return SendId == reciverId;
				}
			},
			// 发送语音
			async sendSound() {
				let noCode = +new Date() + "";
				let revicerId = (this.reciver && this.reciver.FormId) || this.reciver.Id
				let conversition = {
					SendId: this.sender.Id,
					ReciverId: revicerId,
					Content: this.voicePath,
					Type: 3,
					State: 0,
					NoCode: noCode,
					CreateDateUtc: '',
					Title: '',
					Description: this.soundDuration,
					Label: '',
					Thumbnail: '',
					ReadFlag: false,
					Avatar: this.sender.Avatar,
					SoundStatus: 0
				}
				if (this.$store.state.socket == null) {
					// 咨询模式：使用HTTP接口改造后再启用；当前先提示
					this.$Common.tipMsg("语音发送暂未支持");
					return;
				}
				this.sendLocal(conversition);
				let result = await this.uploadFile(this.voicePath);
				if (result.code == 200) {
					conversition.Content = result.content;
					this.sendInfo(conversition);
					this.closeSound();
				} else {
					this.$Common.tipMsg("发送语音失败");
				}
			},
			// 关闭语音弹出层
			closeSound() {
				this.soundRecord = false;
				this.voicePath = '';
				this.soundStep = 0;
				this.isPlaySound = false;
				this.innerAudioContext.destroy();
			},
			// 打开语音弹出层
			openSoundRecord() {
				// #ifdef H5
				this.$Common.tipMsg("h5暂不支持");
				// #endif

				// #ifndef H5
				this.soundRecord = true;
				// 为了防止苹果手机静音无法播放
				uni.setInnerAudioOption({
					obeyMuteSwitch: false
				})
				this.recorderManager = uni.getRecorderManager();
				this.innerAudioContext = uni.createInnerAudioContext();
				this.innerAudioContext.autoplay = true;
				this.recorderManager.onStop((res) => {
					console.log('recorder stop' + JSON.stringify(res));
					this.voicePath = res.tempFilePath;
					this.soundStep = 2;
					this.soundDuration = (res.duration / 1000).toFixed(0);
				});
				// #endif

			},
			// 开始录音
			startRecord() {
				console.log('开始录音');
				const options = {
					duration: 60000
				}
				this.recorderManager.start(options);
				this.soundDuration = 0;
				this.soundStep = 1;
			},
			// 结束录音
			endRecord() {
				console.log('录音结束');
				this.recorderManager.stop();
			},
			// 播放用户的录音
			playVoice() {
				if (this.voicePath) {
					this.innerAudioContext.src = this.voicePath;
					this.innerAudioContext.play();
					this.isPlaySound = true;
					this.innerAudioContext.onEnded((res) => {
						this.isPlaySound = false;
					})
				}
			},
			// 点击用户发送/接收的录音
			playSound(item) {
				// debugger
				if (item.Id != this.soundObj.Id) {
					console.log(this.innerAudioContext);
					if (this.innerAudioContext != null) {
						this.innerAudioContext.destroy();
						this.soundObj.SoundStatus = 2;
					}
					if (item.SoundStatus != 1) {
						this.soundObj = item;
						this.innerAudioContext = uni.createInnerAudioContext();
						this.innerAudioContext.autoplay = true;
						this.innerAudioContext.src = item.Content;
						this.innerAudioContext.play();
						item.SoundStatus = 1;
						this.innerAudioContext.onEnded((res) => {
							item.SoundStatus = 2;
						})
					}
				} else {
					if (item.SoundStatus != 1) {
						this.soundObj = item;
						this.innerAudioContext = uni.createInnerAudioContext();
						this.innerAudioContext.autoplay = true;
						this.innerAudioContext.src = item.Content;
						this.innerAudioContext.play();
						item.SoundStatus = 1;
						this.innerAudioContext.onEnded((res) => {
							item.SoundStatus = 2;
						})
					} else {
						this.innerAudioContext.destroy();
						item.SoundStatus = 2;
					}
				}

			},
			// 切换视频全屏
			screenChange(e) {
				let fullScreen = e.detail.fullScreen; //值true为进入全屏，false为退出全屏
				if (!fullScreen) {
					this.videoContext.pause();
				}
			},
			// 播放视频
			videoshow(e) {
				this.videoUrl = e;
				this.videoContext.requestFullScreen({
					direction: 90
				}); //direction: 90  控制全屏的时候视屏旋转多少度 
				this.videoContext.play();
			},
			//查看大图
			previewImg(e) {
				let imgArr = [];
				for (let i = 0; i < this.$store.state.conversitionList.length; i++) {
					if (this.$store.state.conversitionList[i].Type === 1) {
						imgArr.push(this.$store.state.conversitionList[i].Content)
					}
				}
				let index = 0;
				for (let i = 0; i < imgArr.length; i++) {
					if (imgArr[i] == e.currentTarget.dataset.imgurl) {
						index = i;
						break;
					}
				}
				uni.previewImage({
					current: index,
					urls: imgArr
				})
			},
			// 发送校验
			sendVerify() {
				// 健壮性校验
				if (!this.sender || !this.sender.Id) {
					this.$Common.tipMsg('用户信息异常，请重新登录');
					return;
				}
				if (!this.reciver || (!this.reciver.Id && !this.reciver.FormId && !this.reciver.id)) {
					this.$Common.tipMsg('会话信息异常，请返回重试');
					return;
				}
				
				let sendContent = this.sendContent.trim();
				if (sendContent.length == 0) {
					this.$Common.tipMsg("不能发送空白消息")
					return;
				}
				
				// 处理表情符号
					let pattern = /\[.*?\]/g;
					let matchResult = sendContent.match(pattern);
					if (matchResult != null) {
						matchResult.map(x => {
							let name = x.substr(0, x.length - 1).substr(1)
						let url = `<img src=\"https://howcode.online/emo/${name}.png\" class=\"emo-image\"/>`
							sendContent = sendContent.replace(x, url)
						})
					}
				
				// 根据模式选择不同的处理逻辑
				if (this.isConsultationMode) {
					// 智能咨询模式：使用咨询消息逻辑
					this.sendConsultationMessage(sendContent);
				} else {
					// 好友聊天模式：使用原有逻辑
					sendContent = "<p>" + sendContent + "</p>"
					let noCode = +new Date() + "";
					let reciverId = (this.reciver && this.reciver.FormId) || this.reciver.Id;
					let conversition = {
						SendId: this.sender.Id,
						ReciverId: reciverId,
						Content: sendContent,
						Type: 0,
						State: 0,
						NoCode: noCode,
						CreateDateUtc: '',
						Title: '',
						Description: '',
						Label: '',
						Thumbnail: '',
						ReadFlag: false,
						Avatar: this.sender.Avatar,
						SoundStatus: 0
					}
					if (this.$store.state.socket == null) {
						this.$Common.tipMsg("socket实例为空");
						return;
					}
					this.sendLocal(conversition);
					this.sendInfo(conversition);
				}
				
				this.sendContent = '';
			},
			// 发送信息到本地显示（好友聊天保留；咨询模式不使用该列表）
			sendLocal(conversition) {
				if (this.isConsultationMode) {
					this.$store.commit('addConsultationMessage', conversition);
				} else {
					let conversitionList = this.$store.state.conversitionList;
					conversitionList.push(conversition);
					this.$store.commit('setPropName', { propName: 'conversitionList', value: conversitionList });
				}
				this.$Common.toBottom();
			},
			// 智能咨询消息发送
			sendConsultationMessage(content) {
				// 创建用户消息对象（临时，用于本地显示）
				const userMessage = {
					id: `local-${Date.now()}`,
					SendId: this.sender.Id,
					ReciverId: 0,
					Content: "<p>" + content + "</p>",
					Type: 0,
					State: 0, // 发送中
					NoCode: Date.now() + "",
					CreateDateUtc: new Date().toISOString(),
					Avatar: (this.sender && this.sender.Avatar) || '../../static/img/user_avatar.png',
					ReadFlag: false,
					SoundStatus: 0,
					consultationId: this.currentConsultation.id
				};
				
				// 添加用户消息到本地列表（立即显示，但状态为"发送中"）
				this.$store.commit('addConsultationMessage', userMessage);
				
				// 滚动到底部
				this.$Common.toBottom();
				
				// 无等待：直接并行触发HTTP兜底，随后刷新列表对齐
				this.sendMessageWithHTTP(content, userMessage);
			},
			
			// 使用HTTP API发送消息
			sendMessageWithHTTP(content, userMessage) {
				const messageData = {
					content: content,
					consultationId: this.currentConsultation.id,
					type: 0
				};
				
				this.$store.dispatch('sendConsultationMessageAction', messageData)
					.then((resData) => {
						// 将本地消息转正：更新为服务器messageId并置为已发送，避免闪现两条
						const msgIndex = this.$store.state.consultationMessages.findIndex(msg => msg.id === userMessage.id);
						if (msgIndex !== -1 && resData && resData.messageId) {
							this.$store.state.consultationMessages[msgIndex].Id = resData.messageId;
							this.$store.state.consultationMessages[msgIndex].id = resData.messageId;
							this.$store.state.consultationMessages[msgIndex].State = 1;
						}
						// 刷新一次消息以与后端对齐（包含AI异步回复）
						this.refreshConsultationMessages();
						setTimeout(() => this.refreshConsultationMessages(), 800);
					})
					.catch(error => {
						console.error('发送消息失败:', error);
						// 更新消息状态为发送失败
						const msgIndex = this.$store.state.consultationMessages.findIndex(msg => msg.id === userMessage.id);
						if (msgIndex !== -1) {
							this.$store.state.consultationMessages[msgIndex].State = -1;
						}
						this.$Common.tipMsg("消息发送失败，请重试");
					});
			},
			// 去除本地模拟AI回复，统一通过拉取后端消息
			
			// 真实发送消息
			sendInfo(conversition) {
				let revicerId = (this.reciver && this.reciver.FormId) || this.reciver.Id;
				let data = {
					Conversition: conversition,
					ReciverId: revicerId,
					Sender: this.sender,
				};
				this.$store.state.socket.emit("sendMsg", data);
			},
			//获取设备信息
			async getTelephoneInfo() {
				uni.getSystemInfo({
					success: (res) => {
						// 设置滚动高度
						const query = uni.createSelectorQuery();
						query.select('#body').boundingClientRect();
						query.exec(res => {
							res.map((item, index) => {
								this.windowHeight = item ? item.height : 0;
							})
							// 如果windowHeight为0，使用屏幕高度
							if (!this.windowHeight) {
								this.windowHeight = res.windowHeight || 600;
							}
							// 确保底部有足够空间
							this.contentHeight = this.windowHeight - this.bottomHeight - 50;
							// 初次进入时滚动一次到底，后续不再因为高度计算触发滚动
							if (!this.didInitialScroll) {
								this.didInitialScroll = true;
								this.$nextTick(() => this.$Common.toBottom(150, true));
							}
						})
					}
				})
			},
			// 打开表情
			chooseEmoji() {
				this.hideMore = true;
				if (this.hideEmoji) {
					this.hideEmoji = false;
					this.openDrawer();
				} else {
					this.hideDrawer();
				}
			},
			// 展示更多
			showMore() {
				this.hideEmoji = true;
				if (this.hideMore) {
					this.hideMore = false;
					this.openDrawer();
				} else {
					this.hideDrawer();
				}
			},
			// 打开抽屉
			openDrawer() {
				this.popupLayerClass = 'showLayer';
			},
			// 隐藏抽屉
			hideDrawer() {
				this.popupLayerClass = '';
				setTimeout(() => {
					this.hideMore = true;
					this.hideEmoji = true;
				}, 150);
			},
			//获取焦点，如果不是选表情ing,则关闭抽屉
			textareaFocus(textBox) {
				this.expressionShow = false;
				this.moreTool = false;
				this.popupLayerClass = '';
				this.savePos()
			},
			// 插入表情
			insertEmo(content) {
				if (this.start != undefined && this.end != undefined) {
					var pre = this.sendContent.substr(0, this.start);
					var post = this.sendContent.substr(this.end);
					this.sendContent = pre + content + post;
					this.start += content.length;
					this.end += content.length;
				} else {
					this.sendContent += content;
				}
			},
			// 保存焦点位置
			savePos() {
				uni.getSelectedTextRange({
					complete: res => {
						this.start = res.start;
						this.end = res.end;
					}
				});
			},
			//上传图片
			async uploadImage() {
				uni.chooseImage({
					count: 1, //默认9
					sourceType: ['camera', 'album'],
					success: (res) => {
						let type = "jpg";
						let rate = "0.8";
						if (res.tempFiles[0].path.indexOf("png") >= 0) {
							type = "png"
						} else if (res.tempFiles[0].path.indexOf("jpeg") >= 0) {
							type = "jpeg"
						}
						if (res.tempFiles[0].size < 1024000) {
							rate = "0.9"
						} else if (res.tempFiles[0].size > 1024000 && res.tempFiles[0].size <= 2048000) {
							rate = "0.8"
						} else if (res.tempFiles[0].size > 2048000 && res.tempFiles[0].size <= 5120000) {
							rate = "0.5"
						} else if (res.tempFiles[0].size > 5120000 && res.tempFiles[0].size < 10240000) {
							rate = "0.4"
						} else if (res.tempFiles[0].size > 10240000) {
							this.$Common.tipMsg("图片大小不得超过10M")
							return;
						}
						uni.showLoading({
							title: '上传图片中...',
							mask: true
						})
						this.$refs.wCompress.start(res.tempFilePaths[0], {
								pixels: 4000000, // 最大分辨率，默认二百万
								quality: rate, // 压缩质量，默认0.8
								type: type, // 图片类型，默认jpg
								base64: false, // 是否返回base64，默认false，非H5有效
							})
							.then(async res  =>  {
								uni.hideLoading();
								let result = await this.uploadFile(res);
								console.log(result);
								if (result.code == 200) {
									this.imageList.push(result.content);
									this.sendImage(result.content, 1);
								}
							})
							.catch(e => {
								uni.hideLoading()
							})
					}
				});
			},
			// 打开视频
			selectVedio() {
				uni.chooseVideo({
					count: 1, //默认9
					sourceType: ['camera', 'album'],
					success: (res) => {
						this.sendVideo(res, 2);
					}
				});
			},
			// 发送图片
			sendImage(content, type) {
				let noCode = +new Date() + "";
				let revicerId = (this.reciver && this.reciver.FormId) || this.reciver.Id
				let conversition = {
					SendId: this.sender.Id,
					ReciverId: revicerId,
					Content: content,
					Type: type,
					State: 0,
					NoCode: noCode,
					CreateDateUtc: '',
					Title: '',
					Description: '',
					Label: '',
					Thumbnail: '',
					ReadFlag: false,
					Avatar: this.sender.Avatar,
					SoundStatus: 0
				}
				if (this.$store.state.socket == null) {
					this.$Common.tipMsg("socket实例为空");
					return;
				}
				this.sendLocal(conversition);
				this.sendInfo(conversition);
			},
			// 发送视频
			async sendVideo(res, type) {
				let noCode = +new Date() + "";
				let revicerId = (this.reciver && this.reciver.FormId) || this.reciver.Id
				let conversition = {
					SendId: this.sender.Id,
					ReciverId: revicerId,
					Content: res.tempFilePath,
					Type: type,
					State: 0,
					NoCode: noCode,
					CreateDateUtc: '',
					Title: '',
					Description: '',
					Label: '',
					Thumbnail: '',
					ReadFlag: false,
					Avatar: this.sender.Avatar,
					SoundStatus: 0
				}
				if (this.$store.state.socket == null) {
					this.$Common.tipMsg("socket实例为空");
					return;
				}
				this.sendLocal(conversition);
				let result = await this.uploadFile(res.tempFilePath);
				if (result.code == 200) {
					conversition.Content = result.content;
					this.sendInfo(conversition);
				}
			},
			// 上传文件
			uploadFile(tempFilePath) {
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: this.$Config.APIURL + '/api/uploadFile', //接口地址
						filePath: tempFilePath,
						name: 'file',
						success: (uploadFileRes) => {
							let result = {
								code: 500,
								content: ""
							}
							if (uploadFileRes.statusCode == 200) {
								let data = JSON.parse(uploadFileRes.data);
								result.code = 200;
								result.content = this.$Config.APIURL +
									`/api/getFile?url=${data[0].filename}${data[0].originalname}`
								resolve(result)
							} else {
								resolve(result)
							}
						},

					});
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	@import "@/static/css/chat.scss";
	@import "@/static/css/icon.css";

	li {
		list-style: none;
	}

	.close-btn {
		position: absolute;
		left: 50%;
		top: -50px;
		transform: translateX(-50%);
		height: 30px;
		width: 30px;
		font-size: 12px;
		color: #000;
		background-color: #fff;
		text-align: center;
		line-height: 30px;
		border-radius: 50%;
	}

	.sound-box {
		width: 80%;
		height: 200rpx;
		background-color: #fff;
		flex-wrap: wrap;
		border-radius: 10rpx;
		position: relative;

		.icon-luyin2,
		.icon-zanting,
		.icon-bofang {
			font-size: 80rpx;
			color: #1CD66C;
			width: 100%;
			text-align: center;
		}

		.icon-bofang2 {
			width: 100%;
			height: 100rpx;
		}

		.tip-box {
			justify-content: space-around;
			width: 100%;

			.tip {
				font-size: 28rpx;
			}
		}

	}

	.chat-box {
		height: 100vh!important;
		width: 100%;
		
		.ai-model-info {
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			padding: 20rpx;
			display: flex;
			align-items: center;
			color: white;
			
			.ai-avatar {
				width: 80rpx;
				height: 80rpx;
				margin-right: 20rpx;
				
				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			
			.ai-info {
				flex: 1;
				
				.ai-name {
					font-size: 32rpx;
					font-weight: 500;
					margin-bottom: 8rpx;
				}
				
				.ai-status {
					font-size: 24rpx;
					opacity: 0.8;
				}
			}
		}
		
		.welcome-message {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 60rpx 40rpx;
			
			.welcome-content {
				background: white;
				border-radius: 20rpx;
				padding: 40rpx;
				text-align: center;
				box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
				max-width: 600rpx;
				
				.welcome-title {
					font-size: 36rpx;
					font-weight: 600;
					color: #333;
					margin-bottom: 20rpx;
				}
				
				.welcome-subtitle {
					font-size: 28rpx;
					color: #666;
					line-height: 1.6;
					margin-bottom: 30rpx;
				}
				
				.welcome-question {
					font-size: 32rpx;
					color: #667eea;
					font-weight: 500;
				}
			}
		}

		.chat-content {
			background: #272A2F;
			width: 100%;
			height: calc(100vh - 150rpx); /* 修改：增加底部安全区域 */
			overflow-y: auto;
			padding-bottom: 50rpx; /* 增加：更大的底部间距 */

			.customerServiceBlock {
				float: left;
				margin: 40rpx 0;
				display: flex;
				position: relative;

				.customerServiceImage>image {
					height: 100rpx;
					width: 100rpx;
				}

				.customerServiceImage {
					position: absolute;
					left: 16rpx;
					height: 100rpx;
					width: 100rpx;
					overflow: hidden;
				}

				.yourSendImage {
					padding: 10rpx;
					border-radius: 11px;
					max-width: 400rpx;
					margin-right: 120rpx;
					margin-left: 120rpx;
					overflow: hidden;
					max-height: 500rpx;
					width: 400rpx;
					height: auto;
				}

				.yourSendVideo,
				.yourVideoBtn {
					padding: 10rpx;
					border-radius: 11px;
					margin-left: 128rpx;
					overflow: hidden;
					width: 400rpx;
					height: 400rpx;
				}

				.yourVideoBtn {
					z-index: 99;
					position: absolute;
					top: 5px;
					left: 5px;
				}

				.otherContent {
					background: #eeeeee;
					padding: 20rpx 20rpx;
					border-radius: 40rpx;
					border-top-left-radius: 0;
					max-width: 400rpx;
					margin-left: 140rpx;
					position: relative;
					min-height: auto; /* 修改：从100rpx改为auto */
					align-items: center;
					word-break: break-word; /* 添加：确保长文本能够换行 */
				}

				.yourSound {
					background: #eeeeee;
					padding: 20rpx 20rpx;
					border-radius: 40rpx;
					border-top-left-radius: 0;
					width: 200rpx;
					margin-left: 140rpx;
					position: relative;
					min-height: auto; /* 修改：从100rpx改为auto */
					display: flex;
					align-items: center;

					.desc {
						width: 60rpx;
						text-align: center;
					}

					.sound-icon {
						width: 70rpx;
						text-align: left;
					}
				}
			}

			.sendImageError {
				position: absolute;
				top: 50%;
				left: -60rpx;
				background: red;
				color: #fff;
				display: inline-block;
				width: 40rpx;
				text-align: center;
				height: 40rpx;
				border-radius: 50%;
				transform: translateY(-50%);
			}

			.sendError {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: -50rpx;
				background: red;
				color: #fff;
				display: inline-block;
				width: 40rpx;
				text-align: center;
				height: 40rpx;
				border-radius: 50%;
				font-size: 28rpx;
			}

			.loadingIcon {
				width: 60rpx;
				height: auto;
			}

			.mineSendImage,
			.yourSendImage {
				padding: 10rpx;
				border-radius: 11px;
				max-width: 400rpx;
				margin-right: 120rpx;
				overflow: hidden;
				max-height: 500rpx;
				width: 400rpx;
				height: auto;
			}

			.mineSendVideo,
			.videoBtn {
				padding: 10rpx;
				border-radius: 11px;
				margin-right: 128rpx;
				overflow: hidden;
				width: 400rpx;
				height: 400rpx;
			}

			.mineSound {
				background: #635C5B;
				color: #fff;
				padding: 20rpx 20rpx;
				border-radius: 40rpx;
				border-top-right-radius: 0;
				width: 200rpx;
				margin-right: 140rpx;
				position: relative;
				min-height: 100rpx;
				display: flex;
				align-items: center;

				.desc {
					width: 60rpx;
					text-align: center;
				}

				.sound-icon {
					width: 70rpx;
					text-align: left;
				}
			}

			.videoBtn {
				z-index: 99;
				position: absolute;
				top: 5px;
				left: 5px;
			}

			.myself_item {
				float: right;
				margin: 40rpx 0;
				display: flex;
				position: relative;

				.myselfImage {
					height: 100rpx;
					width: 100rpx;
					position: absolute;
					right: 16rpx;
					overflow: hidden;
				}

				.myselfImage>image {
					height: 100rpx;
					width: 100rpx;
				}

				.myselfContent {
					background: #635C5B;
					color: #fff;
					padding: 20rpx 20rpx;
					border-radius: 40rpx;
					border-top-right-radius: 0;
					max-width: 400rpx;
					margin-right: 140rpx;
					position: relative;
					min-height: auto; /* 修改：从100rpx改为auto */
					align-items: center;
					word-break: break-word; /* 添加：确保长文本能够换行 */
				}

				.expression_img {
					width: 40rpx;
					height: auto;
					vertical-align: middle;
				}

				.myselfImageLoad {
					position: absolute;
					left: -50rpx;
					top: 50%;
					transform: translateY(-50%);
				}

				.myselfLoad {
					position: absolute;
					left: -50rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}

		.chat-botton {
			width: 100%;
			height: 100rpx;
			background-color: #f2f2f2;
			display: flex;
			position: fixed;
			z-index: 20;
			bottom: -2rpx;
			transition: all .15s linear;
			border-bottom: solid 1rpx #ddd;

			.textbox {
				width: 100%;
				min-height: 70rpx;
				margin-top: 15rpx;

				.text-mode {
					width: 100%;
					min-height: 70rpx;
					display: flex;
					background-color: #fff;
					border-radius: 40rpx;
				}
			}

			.popup-layer {
				transition: all .15s linear;
				width: 100%;
				height: 50vw;
				padding-bottom: 15px;
				background-color: #fff;
				border-top: solid 0.5px #ddd;
				position: fixed;
				z-index: 20;
				top: 100%;
				padding-top: 40rpx;

				.toolUl {
					width: 100%;
					display: flex;
					margin: 0;
					padding: 0;

					.FileImage {
						margin-top: 5px;
						z-index: 1;
						position: absolute;
						opacity: 0;
						bottom: 0px;
						left: -0.1rem;
						height: 60rpx;
						width: 100rpx;
					}
				}

				.toolUl>li {
					display: inline-block;
					text-align: center;
					font-size: 12px;
					position: relative;
					width: 25%;
				}

				.item {
					width: 50px;
					height: 50px;
					background-color: #F2F5F7;
					border-radius: 50%;
					display: inline-block;
				}

				.toolIcon {
					display: -webkit-flex;
					display: flex;
					-webkit-justify-content: center;
					justify-content: center;
					-webkit-align-items: center;
					align-items: center;
					width: 100%;
					height: 100%;
					position: relative;
				}

				.toolImage {
					height: 60rpx;
					width: auto;
				}

				.totalName {
					margin-top: 5px;
					display: block;
					color: #515A7C;
				}

				.face {
					width: 101%;
				}

				.face ul {
					width: 100%;
					height: 100%;
					display: flex;
					flex-wrap: wrap;
					padding: 8px;
					box-sizing: border-box;
				}

				.face ul li {
					width: 60rpx;
					height: 60rpx;
					list-style-type: none;
					cursor: pointer;
					display: flex;
					justify-content: center;
					align-items: center;
					box-sizing: content-box;
					padding: 10rpx;
				}

				.face ul li>image {
					width: 60rpx;
					height: auto;
				}
			}
		}
	}
</style>
